<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection" />
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <title>App下载</title>
    <style>
        *{
            padding:0;
            margin:0;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            outline: 0
        }
        img{
            vertical-align:middle;
            width:100%;
        }
        a{
            background: transparent;
            text-decoration:none;
            color:rgba(0,0,0,.54);
        }
        a:active{
            outline: none;
        }
        html{
            width: 100%;
            height: 100%;
        }
        body{
            font-weight: 300;
            font-size: 13px;
            width: 100%;
            height: 100%;
            background: url(images/bg.png) no-repeat center top;
            -webkit-background-size: 100% auto;
            background-size: 100% auto;
        }
        li{
            list-style: none;
        }

        @-webkit-keyframes marquee {
          0% { -webkit-transform: translate(375px); transform: translate(375px); }
          100% { -webkit-transform: translate(-100%); transform: translate(-100%); }
        }
        @keyframes marquee {
          0% { -webkit-transform: translate(375px); transform: translate(375px); }
          100% { -webkit-transform: translate(-100%); transform: translate(-100%); }
        }
        #app{
            width: 100%;
            height: 100%;
            overflow:auto;
        }
        .banner{
            position: relative;
            width: 100%;
            padding-top: 66.7%;
            background:url(https://img.kongapi.com/xyzc/icon/dc1adb4f5add48ad89878639fc1e1776.png) no-repeat center center;
            -webkit-background-size: 100% auto;
            background-size: 100% auto;
        }
        .banner .title{
            position: absolute;
            left:0;
            top:13.4%;
            font-size: 30px;
            line-height: 42px;
            color:#FF7043;
            width: 100%;
            text-align: center;
            font-weight: bold;
        }
        .banner li{
            float:left;
            padding:3px 24px 3px 16px;
            color: rgba(0,0,0,.54);
        }
        .banner span{
            color:#FF6E40;
        }
        .main{
            padding:0 24px;
        }
        /*.title{
            color:#FF5722;
            font-size: 18px;
            font-weight: normal;
            position: relative;
            text-align: center;
        }
        .title span{
            display: inline-block;
            padding: 0 22px;
            background-color: #F7EACE;
            position: relative;
            z-index:2;
        }
        .title:after{
            content:'';
            position: absolute;
            top:50%;
            border-top: 2px solid rgba(0,0,0,.12);
            left: 0;
            right: 0;
        }*/
        .tips{
            font-size: 13px;
            line-height: 20px;
            color:rgba(0,0,0,.54);
            text-align: center;
        }
        .limit{
            padding-top: 8px;
            padding-bottom: 24px;
            text-align: center;
            color:rgba(0,0,0,.54);
        }
        .explain{
            padding-bottom: 10px;
        }
        .explain p{
            line-height: 20px;
            color:rgba(0,0,0,.54);
        }
        .explain-title{
            font-size: 15px;
            margin-bottom: 16px;
            position: relative;
            color:#5C4D4D;
            text-align: center;
        }
        .explain-title span{
            position: relative;
            z-index:2;
            background-color: #F7EACE;
            padding: 0 20px;
        }
        .explain-title:after{
            content:'';
            position: absolute;
            top:50%;
            left:0;
            right:0;
            border-bottom: 1px solid rgba(0,0,0,.12);
        }
        .loading{
            position:relative;
            width:100%;
            height:45px;
            clear:both;
        }
        .loading__box{
            position:absolute;
            left:50%;
            top:50%;
            text-align: center;
            padding:10px;
            border-radius:5px;
            -webkit-transform: translate3d(-50%,-50%,0);
            transform: translate3d(-50%,-50%,0)
        }
        .loading__icon{
            display:block;
            width:24px;
            height:24px;
            margin:0 auto;
            border-top:2px solid #fff;
            border-left:2px solid #fff;
            border-bottom:2px solid #fff;
            border-right:2px solid transparent;
            border-radius:50%;
            -webkit-animation: loading 1s infinite linear;
            animation: loading 1s infinite linear;
        }
        @keyframes loading {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }
        @-webkit-keyframes loading {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg)
            }

            to {
                -webkit-transform: rotate(1turn);
                transform: rotate(1turn)
            }
        }
        .header-text{
            color:#fff;
            padding-top: 32.5%;
            text-align: center;
        }
        .header-text span{
            display: block;
            font-size: 10px;
            line-height: 14px;
        }
        .header-text p{
            font-size: 15px;
            line-height: 33px;
        }
        .header-text p i{
            font-style: normal;
            display: inline-block;
            font-size: 24px;
            font-weight: bold;
        }
        .icon{
            display: block;
            margin:12px 24px;
        }
        .download-list{
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: justify;
            -webkit-justify-content: space-between;
            -ms-flex-pack: justify;
            justify-content: space-between;
            padding-top: 8px;
            margin:0 20px;
        }
        .download-item{
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            -ms-flex: 1;
            flex: 1;
            text-align: center;
            padding: 0 20px;
        }
        .download-item img{
            height: 38px;
            width: auto;
        }
        .download-item p{
            font-size: 15px;
            color:#FF5722;
        }
        .download-item .button{
            display: block;
            padding: 7px 0;
            width: 100%;
            color:#fff;
            font-size: 15px;
            border-radius: 18px;
            background-color: #FF5722;
            margin-top: 6px;
        }
        .download-item .button:active{
            background-color: #f13a00;
        }
        .download-item .button.transparent{
            background-color: transparent;
            color:#FF5722;
            border:1px solid #FF5722;
            margin-top: 10px;
        }
        .logout{
            padding:15px 0;
            width: 100px;
            margin:0 auto;
            text-align: center;
            margin-top: 25px;
            font-size: 13px;
            color:#FF5722;
        }
    </style>
</head>

<body>
    <div id="app"'>
        <header class='header-text'>
            <span>(原网页端暂时下架)</span>
            <p>移动端充值最高<i>7</i>折</p>
        </header>
        <div class='icon'><img src="images/icon@3x.png"></div>
        <div class='download-list'>
            <div class="download-item">
                <img src="images/iphone@3x.png" alt="">
                <p>iPhone版</p>
                <span class='button' id='ios'>立即下载</span>
                <a class='button transparent' href='./explain.html'>安装说明</a>
            </div>
            <div class="download-item">
                <img src="images/android@3x.png" alt="">
                <p>Android版</p>
                <span class='button' id='android'>立即下载</span>
                <span class='button transparent' style="border:0;margin-top:0px;">无法下载<br/>请在浏览器中打开</span>
            </div>
        </div>
        <div class='logout' id='logout'>退出登录</div>
        <!-- <div class="loading" v-if='loading'>
            <span class="loading__box">
                <i class="loading__icon"></i>
            </span>
        </div> -->
    </div>

    <script>

        var getQueryString = function (url) {
            if (url) {
                url = url.substr(url.indexOf("?") + 1);
            }
            var result = {}, queryString = url || location.search.substring(1),
                re = /([^&=]+)=([^&]*)/g, m

            while (m = re.exec(queryString)) {
                result[decodeURIComponent(m[1])] = decodeURIComponent(m[2])
            }

            return result;
        }
        var id = getQueryString().id
        var title = getQueryString().title
        var color = getQueryString().color
        var channel = getQueryString().channel || ''
        var url

        document.getElementById('logout').addEventListener('click',function(){
            if(channel){
                url = 'https://youjie.kongapi.com/?channel='+ channel +'#/bind-phone'
            }
            else{
                url = 'https://youjie.kongapi.com/#/bind-phone'
            }
            location.href = url
        })
        //ios 链接地址
        document.getElementById('ios').addEventListener('click',function(){
            location.href = 'itms-services://?action=download-manifest&url=https://yp-youjieapp.oss-cn-hzfinance.aliyuncs.com/yiniuxin/manifest.plist'
        })
        // 安卓链接地址
        document.getElementById('android').addEventListener('click',function(){
            location.href = 'https://yp-youjieapp.oss-cn-hzfinance.aliyuncs.com/youjiebiz/android/youjiebiz-realese.apk#mp.weixin.com'
        })
    //     var app = new Vue({
    //       el: '#app',
    //       data: {
    //         list: [],
    //         background:'#'+color,
    //         title:title,
    //         loading:true
    //       },
    //       filters:{
    //         url:function(url) {
    //             var protocol = location.protocol
    //             var host = location.host
    //             var pathname = location.pathname
    //             var reURL = /^(https?|ftp|file):\/\/.+$/;
    //             var str = ''
    //             if(!reURL.test(url)){
    //                 return 'https://xyzc.kongapi.com' + url
    //             }
    //             else{
    //                 return url
    //             }
    //         }
    //       },
    //       methods:{
    //         getList:function(){
    //             var self = this
    //             $.ajax({
    //                 type:"post",
    //                 url: 'https://xyzc.kongapi.com/lending/h5LendingList',
    //                 data:{
    //                     id:id
    //                 },
    //                 dataType:"json",
    //                 success: function(resp){
    //                     self.loading =false;
    //                     if(resp.code==0){
    //                       self.list = resp.data
    //                     }
    //                 },
    //                 error:function(error){
    //                     console.error(error)
    //                     self.loading = false
    //                 }
    //             })
    //         }
    //     },
    //     created() {
    //         this.getList()
    //     }
    // })


    </script>

</body>

</html>
